<template>
  <div id="pubuContainer" ref="pubuContainer" class="pubuContainer"></div>
</template>

<script>
import waterColors from '@/utils/waterColor.js'
import chart from '@/utils/chart.js'
export default {
  name: 'PubuView',
  props: {
    zoomYAxisInMouseWheelOnSerires: {
      type: Boolean,
      required: false,
      default: false
    },
    showTitle: {
      type: Boolean,
      required: false,
      default: false
    },
    showAxisXUnits: {
      type: Boolean,
      required: false,
      default: false
    },
    showAxisYUnits: {
      type: Boolean,
      required: false,
      default: true
    },
    yAxisPadding: {
      type: Number,
      required: false,
      default: 75
    },
    mouseMove: {
      type: Function,
      required: false,
      default: () => { }
    },
    xIntervalChange: {
      type: Function,
      required: false,
      default: () => {}
    }
  },
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.chart = chart().pubu({
      container: this.$refs.pubuContainer,
      background: {
        r: 0 / 255,
        g: 0 / 255,
        b: 0 / 255
      }
    })
    // 设置瀑布图坐标基本样式和配置
    this.series = this.chart.addSeries({
      title: this.showTitle
        ? {
            text: '瀑布图',
            left: this.$refs.pubuContainer.clientWidth / 2,
            top: 10
          }
        : null,
      // x轴单位
      axisXUnits: this.showAxisXUnits
        ? {
            text: '频率/MHz',
            left: this.$refs.pubuContainer.clientWidth / 2,
            top: this.$refs.pubuContainer.clientHeight
          }
        : null,
      // y轴单位
      axisYUnits: this.showAxisYUnits
        ? {
            text: '时间/Times',
            left: 5,
            top: this.$refs.pubuContainer.clientHeight / 2
          }
        : null,
      // x轴标点数量
      xAxisMarkNum: 10,
      // y轴标点数量
      yAxisMarkNum: 5,
      // 行高 => 影响着瀑布图下刷的速度
      row: 300,
      // 列宽
      column: this.pointNum,
      // y轴左边距
      yAxisPadding: this.yAxisPadding,
      // y轴右边距
      yAxisAnotherPadding: 20,
      // x轴下边距
      xAxisPadding: 40,
      // x轴上边距
      xAxisAnotherPadding: 30,
      // x轴坐标格式化
      xAxisMarkFormatter: (value) => {
        return Number(value / 1000).toFixed(3)
      },
      // 坐标轴颜色
      axisColor: {
        r: 25 / 255,
        g: 190 / 255,
        b: 5 / 255
      },
      showColors: true, // 显示颜色刻度
      // showAllData: true // 是否显示所有的列，设置为true的时候不对column做处理，相当于此时在抽点
      // x轴最小刻度
      minXInterval: 250,
      zoomYAxisInMouseWheelOnSerires: this.zoomYAxisInMouseWheelOnSerires
    })
    this.series.setColors(waterColors.sixColors())
    this.series.setValueInterval(-220, -10)

    // 设置瀑布图X轴区间变化时的回调函数 => 变化时折线图x轴区间跟着变化同时刷新图表
    this.series.setOnXIntervalChange(this.xIntervalChange)
    // this.series.setOnXIntervalChange((newInterval) => {
    //   /* // console.log('newInterval', newInterval)
    //     // 使用防抖函数，使其在缩放结束0.3s后再去调接口改数据
    //     this.timerFlag && clearTimeout(this.timerFlag)
    //     this.timerFlag = setTimeout(async () => {
    //       try {
    //         // 设置折线图x轴当前区间
    //         // this.series.changeXInterval(newInterval)
    //         // this.pubuxInterval = newInterval;
    //         const temInerval = newInterval
    //         if (temInerval[0] === this.initXAxisMin && temInerval[1] === this.initXAxisMax) {
    //           this.formatStatus = false
    //           this.disabledChange = true
    //           this.series.setXAxisMarkFormatter((value) => {
    //             return Number(value / 1000).toFixed(2)
    //           })
    //           this.series.setXAxisMarkFormatter((value) => {
    //             return Number(value / 1000).toFixed(2)
    //           })
    //           setTimeout(() => {
    //             this.disabledChange = false
    //           }, 300)
    //         } else {
    //           if (this.formatStatus) {
    //             temInerval[0] = (newInterval[0] * (this.xAxisMax - this.xAxisMin)) / this.temMax + this.xAxisMin
    //             temInerval[1] = (newInterval[1] * (this.xAxisMax - this.xAxisMin)) / this.temMax + this.xAxisMin
    //           }
    //         }
    //         await setRangeAPI({
    //           from: temInerval[0],
    //           end: temInerval[1],
    //           userName: '1_12345678'
    //         })
    //         this.chart.refresh()
    //       } catch (error) {
    //         console.log(error)
    //       }
    //     }, 300) */
    // })
    // 给瀑布图添加鼠标移动事件
    this.series.setOnMouseMoveListener(this.mouseMove)
    // 给瀑布图添加点击事件
    this.series.setOnClickListener((x, y, event) => {
      // let date = new Date(y);
      // let hour =
      //   date.getHours().toString().length > 1
      //     ? date.getHours()
      //     : "0" + date.getHours();
      // let minutes =
      //   date.getMinutes().toString().length > 1
      //     ? date.getMinutes()
      //     : "0" + date.getMinutes();
      // let seconds =
      //   date.getSeconds().toString().length > 1
      //     ? date.getSeconds()
      //     : "0" + date.getSeconds();
      // let str = hour + ":" + minutes + ":" + seconds;
      // this.pubuxClickValue = x.toFixed(2);
      // this.pubuyClickValue = str;
      // console.log("瀑布图鼠标当前位置:", x, y);
    })

    this.series.setOnMeasureListener((startX, startY, endX, endY) => {
      let date = new Date(startY)
      let hour =
          date.getHours().toString().length > 1
            ? date.getHours()
            : '0' + date.getHours()
      let minutes =
          date.getMinutes().toString().length > 1
            ? date.getMinutes()
            : '0' + date.getMinutes()
      let seconds =
          date.getSeconds().toString().length > 1
            ? date.getSeconds()
            : '0' + date.getSeconds()
      const startstr = hour + ':' + minutes + ':' + seconds
      date = new Date(endY)
      hour =
          date.getHours().toString().length > 1
            ? date.getHours()
            : '0' + date.getHours()
      minutes =
          date.getMinutes().toString().length > 1
            ? date.getMinutes()
            : '0' + date.getMinutes()
      seconds =
          date.getSeconds().toString().length > 1
            ? date.getSeconds()
            : '0' + date.getSeconds()
      const endstr = hour + ':' + minutes + ':' + seconds
      this.pubustartX = startX.toFixed(2)
      this.pubustartY = startstr
      this.pubuendX = endX.toFixed(2)
      this.pubuendY = endstr
    })
    this.chart.refresh()
  },
  methods: {
    // 清空图谱
    clearChart () {
      this.series.clearData()
      this.chart.refresh()
    }
  }
}
</script>

<style>
.pubuContainer {
  width: 100%;
  height: 100%;
}
</style>
